<template>
  <div>
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autofocus
          autocomplete="off"
          placeholder="What needs to be done?"
          v-model="input"
          @keydown.enter="iptEnter"
        />
      </header>
      <section class="main" v-show="todoArr.length" v-cloak>
        <input
          class="toggle-all"
          type="checkbox"
          @change="allCompletedChange"
        />
        <todolist :todoArr="handlerfilterArr" />
      </section>
      <footer class="footer" v-show="todoArr.length" v-cloak>
        <span class="todo-count">
          <strong>{{ 132 }}</strong> left
        </span>
        <ul class="filters">
          <li>
            <a href="#/all">All</a>
          </li>
          <li>
            <a href="#/active">Active</a>
          </li>
          <li>
            <a href="#/completed">Completed</a>
          </li>
        </ul>
        <button class="clear-completed" v-show="false" @click="clearCompleted">
          Clear completed
        </button>
      </footer>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <p>Written by <a href="http://evanyou.me">Evan You</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
  </div>
</template>

<script>
import todolist from "./todolist";
import { setTodoList, getTodoList } from "../Todo";
export default {
  data() {
    return {
      input: "",
      todoArr: getTodoList(),
      visibility: "all",
      filterArr: {
        all: this.all,
        active: this.active,
        completed: this.completed,
      },
    };
  },
  methods: {
    clearCompleted() {
      this.todoArr = this.active();
    },
    all() {
      return this.todoArr;
    },
    active() {
      return this.todoArr.filter((v) => !v.isCompleted);
    },
    completed() {
      return this.todoArr.filter((v) => v.isCompleted);
    },
    allCompletedChange(e) {
      this.todoArr.map((item) => {
        return (item.isCompleted = !e.target.checked);
      });
    },
    iptEnter() {
      this.todoArr.push({
        isCompleted: false,
        title: this.input,
      });
      this.input = "";
    },
    editedTodoFn(val, index) {
      this.todoArr[index] = val;
    },
    delTodoItemFn(index) {
      this.todoArr.splice(index, 1);
    },
    isCompletedClkFn(val, index) {
      this.todoArr[index] = val;
    },
    onHashChange() {
      var visibility = window.location.hash.replace(/#\/?/, "");
      this.visibility = visibility;
      console.log(visibility);
    },
  },
  computed: {
    handlerfilterArr() {
      console.log(this.filterArr[this.visibility]());
      return this.filterArr[this.visibility]();
    },
    activeTodoList() {
      return this.todoArr.filter((v) => !v.isCompleted);
    },
  },
  mounted() {
    window.addEventListener("hashchange", this.onHashChange);
    this.onHashChange()
  },
  watch: {
    todoArr: {
      deep: true,
      handler(val) {
        setTodoList(val);
      },
    },
  },
  components: {
    todolist,
  },
};
</script>

<style scoped  src="../todo.css">
</style>